<template>
  <div class="login-block">
    <div class="header">
      <div class="header-icon">
        <router-link to="/home">
          <i class="iconfont icon-xiangzuo"></i>
        </router-link>
      </div>
      <div class="header-text">
        <span>猫眼电影</span>
      </div>
    </div>
    <div class="con">
      <div class="con-input">
        <div class="tel">
          <input type="text" placeholder="请输入手机号" />
          <button disabled>发送验证码</button>
        </div>
        <div class="code">
          <input type="text" placeholder="请输入短信验证码" />
        </div>
        <div>
          <button class="login-btn" @click="change()">登录</button>
        </div>
      </div>
      <div class="msg-block">
        <div class="msg">
          <div>
            <span style="color: #999999">未注册的手机号将自动生成新账号</span>
          </div>
          <div>
            <span>© 猫眼电影 客服电话：</span>
            <span style="color: #df2d2d">400-670-5335</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  methods: {
    change() {
      sessionStorage.setItem("logintype", true);
      this.$router.push({ path: "/me" });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: #ffffff;
}
.login-block {
  width: 100%;
}
.login-block .header {
  width: 100%;
  height: 1.4rem;
  background-color: #df2d2d;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.login-block .header .header-icon {
  width: 60px;
  padding-left: 15px;
}
.login-block .header .header-icon .icon-xiangzuo {
  font-size: 25px;
}

.login-block .header .header-text {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-right: 50px;
}

.login-block .con {
  width: 100%;
  padding: 20px;
  background-color: #f8f8f8;
  position: absolute;
  top: 1.4rem;
  bottom: 0;
}
.login-block .con .con-input {
  width: 8.9335rem;
  height: 4.9335rem;
  /* background-color: black; */
}
.login-block .con .con-input > div {
  display: flex;
  margin-bottom: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.login-block .con .con-input div:nth-of-type(3) {
  border: none;
}
.login-block .con .con-input .tel > button {
  width: 3rem;
  height: 0.52rem;
}
.login-block .con .con-input .tel > input,
.login-block .con .con-input .code > input {
  width: 8.9335rem;
  height: 1.05rem;
  border: none;
  font-size: 16px;
  justify-content: space-around;
  padding: 0.6rem 0 0.6rem 0;
  background-color: #f8f8f8;
  outline: none;
}

.login-btn {
  border: none;
  width: 8.9335rem;
  height: 1.1625rem;
  border-radius: 5px;
  color: #999;
}

.con .msg-block {
  width: 100%;
  display: flex;
}
.con .msg-block .msg {
  width: 100%;
  flex: 1;
  background-color: #f8f8f8;
}
.con .msg-block .msg > div {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 14px;
}
</style>
